<template>
  <div>
    <!-- 冻结弹框规则 -->
    <el-dialog
      title="充值冻结规则"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="750px"
    >
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
          <el-form-item label="冻结实充金额：" prod="enableLockBalance">
            <el-switch
              v-model="form.enableLockBalance"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
            <div v-if="form.enableLockBalance">
              顾客充值后&nbsp;&nbsp;
              <el-form-item
                prop="balanceLockDays"
                :rules="rules.lockDays"
                style="display:inline-block"
              >
                <el-input
                  v-model.trim="form.balanceLockDays"
                  maxlength="4"
                  placeholder="请输入"
                  size="small"
                />&nbsp;&nbsp;天内冻结本次充值所得实充金额的&nbsp;&nbsp;
              </el-form-item>
              <el-form-item
                prop="balanceLockPercent"
                :rules="rules.lockPercent"
                style="display:inline-block"
              >
                <el-input
                  v-model.trim="form.balanceLockPercent"
                  placeholder="请输入"
                  maxlength="3"
                  size="small"
                />&nbsp;&nbsp;%&nbsp;&nbsp;&nbsp;
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item label="冻结赠送金额：" prod="enableLockGiven">
            <el-switch
              v-model="form.enableLockGiven"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
            <div v-if="form.enableLockGiven">
              顾客充值后&nbsp;&nbsp;
              <el-form-item
                prop="frozenGivenDays"
                :rules="rules.lockDays"
                style="display:inline-block"
              >
                <el-input
                  v-model.trim="form.frozenGivenDays"
                  maxlength="4"
                  placeholder="请输入"
                  size="small"
                />&nbsp;&nbsp;天内冻结本次充值所得赠送金额的&nbsp;&nbsp;
              </el-form-item>
              <el-form-item
                prop="frozenGivenPercent"
                :rules="rules.lockPercent"
                style="display:inline-block"
              >
                <el-input
                  v-model.trim="form.frozenGivenPercent"
                  placeholder="请输入"
                  maxlength="3"
                  size="small"
                />&nbsp;&nbsp;%&nbsp;&nbsp;&nbsp;
              </el-form-item>
            </div>
          </el-form-item>
          <!-- <el-form-item prop="lockWithGift">
            <el-checkbox v-model="form.lockWithGift">仅限有金额赠送的充值会冻结</el-checkbox>
          </el-form-item>-->
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="handleSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  validateCustomPositiveInt,
  validatePositiveInt
} from '@/utils/validate.js'
export default {
  props: {
    configForm: {
      type: Object,
      require: true
    }
  },
  data() {
    /**
       * 表单校验方法相关
       */
    const validateLockDays = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入天数'))
      } else if (!validatePositiveInt(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    const validateLockPercent = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入冻结比例'))
      } else if (!validateCustomPositiveInt(value, 2, [100, '100'])) {
        callback(new Error('请输入1~100正整数'))
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        lockDays: [
          {
            required: true,
            validator: validateLockDays,
            trigger: ['blur', 'change']
          }
        ],
        lockPercent: [
          {
            required: true,
            validator: validateLockPercent,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 状态
      dialogVisible: false,
      // 数据
      form: {
        enableLockBalance: false,
        balanceLockDays: '',
        balanceLockPercent: '',
        enableLockGiven: false,
        frozenGivenDays: '',
        frozenGivenPercent: ''
        // lockWithGift: ""
      }
    }
  },
  methods: {
    open() {
      this.show()
    },

    show() {
      if (
        !this.configForm.balanceLockDays &&
          !this.configForm.balanceLockPercent
      ) {
        this.form.enableLockBalance = false
      } else {
        this.form.enableLockBalance = true
      }
      if (
        !this.configForm.frozenGivenDays &&
          !this.configForm.frozenGivenPercent
      ) {
        this.form.enableLockGiven = false
      } else {
        this.form.enableLockGiven = true
      }

      this.form.balanceLockDays = this.configForm.balanceLockDays
      this.form.balanceLockPercent = this.configForm.balanceLockPercent
      this.form.frozenGivenDays = this.configForm.frozenGivenDays
      this.form.frozenGivenPercent = this.configForm.frozenGivenPercent
      // this.form.lockWithGift = this.configForm.lockWithGift;
      this.dialogVisible = true
    },

    hide() {
      this.dialogVisible = false
    },

    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.form.enableLockBalance && !this.form.enableLockGiven) {
            this.configForm.enableLockBalance = false
            this.hide()
            return
          }

          if (this.form.enableLockBalance) {
            this.configForm.balanceLockDays = this.form.balanceLockDays
            this.configForm.balanceLockPercent = this.form.balanceLockPercent
          } else {
            this.configForm.balanceLockDays = 0
            this.configForm.balanceLockPercent = 0
          }

          if (this.form.enableLockGiven) {
            this.configForm.frozenGivenDays = this.form.frozenGivenDays
            this.configForm.frozenGivenPercent = this.form.frozenGivenPercent
          } else {
            this.configForm.frozenGivenDays = 0
            this.configForm.frozenGivenPercent = 0
          }
          // this.configForm.lockWithGift = this.form.lockWithGift;
          console.log(this.form)
          this.hide()
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-input {
    width: 90px;
  }
</style>
